<template>
  <el-dialog v-model="dialogShow" :title="dialogTitle" width="800px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="120px">
      <el-form-item label="登录账号">
        <span>{{dialogParams.row.userName}}</span>
      </el-form-item>
      <el-form-item label="用户名">
        <span>{{dialogParams.row.nickName}}</span>
      </el-form-item>
      <el-form-item label="修改密码" prop="password" required>
        <el-input
            style="width: 50%"
            v-model.trim="dialogForm.password"
            placeholder="修改密码"
            clearable
            show-password
        >
        </el-input>
        <el-text type="danger" style="margin-left: 5px">密码长度6-20位，由字母或数字组成</el-text>
      </el-form-item>
      <el-form-item>
        <div class="flexs">
          <el-button type="primary" :loading="dialogParams.loading" @click="submitDialogForm()">
            确认
          </el-button>
          <el-button @click="resetDialogForm(dialogFormRef)">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {
  Plus
} from "@element-plus/icons-vue"
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch, computed
} from "vue"
import JSEncrypt from "jsencrypt";

const {
  proxy
} = getCurrentInstance()
const emits = defineEmits(["close"])


const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data:{
    type: Object,
    default: {},
  },
});
const dialogForm = reactive({
  password: ''
})

const dialogTitle = computed(()=>{
  return '修改密码'
})


const dialogFormRef = ref(null)
const dialogParams = reactive({
  loading: false,
  row: {}
})
const dialogFormRules = reactive({
  password: [{
    required: true,
    message: "请输入登录密码",
    trigger: "blur"
  }]
})
const dialogShow = ref(false);
watch(()=>props.show,(nVal)=>{
  dialogShow.value = nVal
  if(nVal){
    getKey()
    dialogParams.row = props.data.row
  }
})
const pub_keys = ref("")
function getKey() {
  proxy.$axios
      .get("authentication/public-key")
      .then((res) => {
        if (res.data.code === 200) {
          pub_keys.value = res.data.data
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
      })
}
const closeDialog = () =>{
  resetDialogForm(dialogFormRef.value)
  emits("close")
}
const submitDialog = () =>{
  resetDialogForm(dialogFormRef.value)
  emits("close",true)
}
const resetDialogForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const submitDialogForm = () => {
  dialogFormRef.value.validate((valid, fields) => {
    if (valid) {
      dialogParams.loading = true;
      let data = JSON.parse(JSON.stringify(dialogForm));
      let encryptor = new JSEncrypt() // 创建加密对象实例
      encryptor.setPublicKey(pub_keys.value) // 设置公钥
      data.password = encryptor.encrypt(data.password) // 对内容进行加密
      let sid = dialogParams.row.sid;
      proxy.$axios.put(`/users/${sid}/pas`, data)
          .then((res) => {
            dialogParams.loading = false
            if (res.data.code == 200) {
              proxy.$message({
                message: `修改成功`,
                type: "success"
              })
              submitDialog();
            } else {
              proxy.$message({
                message: res.data.msg,
                type: "error"
              })
            }
          })
          .catch((err) => {
            dialogParams.loading = false
          })
    }
  })
}

onMounted(() => {

})

</script>

<style lang="less">



</style>